<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设备地图点位显示</title>
    <script src="../js/utils/jquery-1.11.1.min.js"></script>
    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.0&ak=gtLoyMXIySotCl8jMKrnVMs2LkIxtlDq"></script>
    <script type="text/javascript" src="http://lbsyun.baidu.com/jsdemo/data/points-sample-data.js"></script>

    <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
    <script src="//cdn.bootcss.com/vue-resource/1.0.3/vue-resource.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">
    <link href="../css/mapPointDisplay.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="app">
    <template>
        <Tree :data="data3" show-checkbox @on-check-change="treeSelectChange"></Tree>
    </template>
</div>
<div id="map"></div>
<script>
    var path = "../";
    new Vue({
        el: '#app',
        data: {
            data3: [],
            tableDate: []
        },
        methods: {
            loadData() {
                // 调用接口获取树层级数据
                this.$http({
                    url: path + "mpDisplay/mapTree",//请求的url
                    type: "post",//请求方式
                    data: {},
                    dataType: "application/json",//后台数据返回类型
                }).then(function (res) {
                    if (res.status === 200) {
                        console.log(res);
                        this.data3 = res.body.tree
                        console.log(this.data3)

                    }
                });
            },
            treeSelectChange(tree) {
                // 获取选中节点和子节点数据
                console.log(tree)
                this.tableDate = []
                this.traverseTree(tree)
                console.log(this.tableDate)
                let treeGPS = []
                this.tableDate[0].forEach(val =>{
                    if (!!val.gps){
                        treeGPS.push(val)
                    }
                });
                var gpsOne = [];
                var gpsTwo = [];
                var gpsThree = [];
                var eqmentCode = [];
                var posction = [];
                for(var i = 0; i < treeGPS.length; i++){
                    var indexOne = treeGPS[i].gps.lastIndexOf(",");
                    var indexTwo = treeGPS[i].gps.indexOf("-");
                    var indexThree = treeGPS[i].gps.lastIndexOf("-");
                    gpsOne.push(treeGPS[i].gps.substring(0,indexOne));
                    gpsTwo.push(treeGPS[i].gps.substring(indexOne+1,indexTwo));
                    gpsThree.push(treeGPS[i].title)
                    eqmentCode.push(treeGPS[i].gps.substring(indexTwo+1,indexThree))
                    posction.push(treeGPS[i].gps.substring(indexThree+1,treeGPS[i].gps.length))
                }
                var map = new BMap.Map("map", {});                        // 创建Map实例
                map.centerAndZoom(new BMap.Point(gpsOne[0], gpsTwo[0]), 11);     // 初始化地图,设置中心点坐标和地图级别
                map.enableScrollWheelZoom();                        //启用滚轮放大缩小
                if (document.createElement('canvas').getContext) {  // 判断当前浏览器是否支持绘制海量点
                    var points = [];  // 添加海量点数据
                    for (var i = 0; i < gpsOne.length; i++) {
                        var point = new BMap.Point(gpsOne[i],gpsTwo[i]);
                        points.push(point);
                        var myIcon = new BMap.Icon("../images/GPS4369.png", new BMap.Size(23, 25), {
                            offset: new BMap.Size(10, 25), // 指定定位位置
                            imageOffset: new BMap.Size(0, 0 - 11 * 25) // 设置图片偏移
                        });
                        var steelContent = '<div>' +
                            '<p style="margin:0;line-height:1.5;font-size:13px;text-indent:2em">' +
                            '<br/>经度：' + gpsOne[i] + '<br/>纬度：' + gpsTwo[i] + '<br/>门店：' + gpsThree[i] +
                            '<br/>位置编号：' + posction[i] + '<br/>设备号：' + eqmentCode[i] + '<br/></p>' +
                            '</div>';

                        var steelOpts = {
                            width: 260,     //信息窗口宽度
                            height: 200,     //信息窗口高度
                            title: "<b>门店信息</b>", //信息窗口标题
                            enableMessage: true	//设置允许信息窗发送短息
                        };
                        createMark = function(lng, lat, info_html,steelOpts) {
                            var _marker = new BMap.Marker(new BMap.Point(lng, lat),{icon: myIcon});
                            _marker.addEventListener("click", function(e) {
                                this.openInfoWindow(new BMap.InfoWindow(info_html,steelOpts));
                            });
                            _marker.addEventListener("mouseover", function(e) {
                                this.setTitle("位于: " + lng + "," + lat);
                            });
                            return _marker;
                        };
                        var marker = createMark(gpsOne[i], gpsTwo[i], steelContent, steelOpts);
                        map.addOverlay(marker);	//将标注添加到地图中
                    }
                } else {
                    alert('请在chrome、safari、IE8+以上浏览器查看本示例');
                }
            },
            /**
             * 递归遍历树
             */
            traverseTree(node) {
                if (!node) {
                    return
                }
                // 表格数据加载
                this.tableDate.push(node);
                if (node.children && node.children.length > 0) {
                    let i = 0;
                    for (i = 0; i < node.children.length; i++) {
                        this.traverseTree(node.children[i])
                    }
                }
            },
        },
        created() {
            this.loadData();
        }
    })
</script>
<script type="text/javascript" src="../js/mapPointDisplay.js"></script>
</body>
</html>